<template>
  <div class="drawer-container">
    <div class="version-box">
      <div class="header">
        <div v-if="isAdd">
          <span
            style="display:inline-block;width:85%;margin-right:5px"
            @keyup.enter="submitAdd"
          >
            <el-input
              v-if="isAdd"
              v-model.trim="formData.version"
              size="small"
              placeholder="按回车提交"
              clearable
            ></el-input>
          </span>

          <el-button
            type="text"
            size="medium"
            @click="closeAdd"
          >取消</el-button>

        </div>
        <el-button
          v-if="!isAdd"
          size="small"
          @click="addVersion"
        >新增</el-button>
      </div>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
      >
        <el-table-column
          prop="version"
          label="版本"
        >

        </el-table-column>
        <el-table-column
          prop="version_status"
          label="支付显示"
        >
          <template v-slot="{row}">
            <div class="version-edit">

              <div
                v-if="row.visible === false"
                class="version-name"
              >
                <el-tag
                  v-if="row.version_status === '1'"
                  type="success"
                  size="mini"
                  :disable-transitions="true"
                >已上线</el-tag>
                <el-tag
                  v-if="row.version_status === '2'"
                  type="warning"
                  size="mini"
                  :disable-transitions="true"
                >对接中</el-tag>
                <el-tag
                  v-if="row.version_status === '3'"
                  type="info"
                  size="mini"
                  :disable-transitions="true"
                >已下线</el-tag>
                <el-tag
                  v-if="row.version_status === '4'"
                  type="danger"
                  size="mini"
                  :disable-transitions="true"
                >审核中</el-tag>
                <el-tag
                  v-if="row.version_status === '5'"
                  type=""
                  size="mini"
                  :disable-transitions="true"
                >审核通过待发布</el-tag>
              </div>
              <div
                v-if="row.visible"
                class="edit"
              >
                <!-- <el-button type="text">取消</el-button> -->
                <el-select
                  v-model="row.version_status"
                  clearable
                  @change="(val)=>changeVersionStatus(val,row)"
                >
                  <el-option
                    v-for="item in vsersionList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value.toString()"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="version"
          label="修改"
          align="left"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="medium"
              style="margin-right:8px"
              @click="editVersion(row)"
            >修改</el-button>
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="delVersion(row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="medium"
              >删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getVersionList, editVersion, delVersion } from '@/api/miniApp'
import { mapState } from 'vuex'
export default {
  name: 'VersionManage',
  props: {
    rowInfo: {
      type: Object,
      default: () => {
        return {
          id: ''
        }
      }
    },
    title: {
      type: String,
      default: '新增'
    }
  },

  data() {
    return {
      isAdd: false, // 是否新增
      isEdit: false,
      tableLoading: false,
      tableData: [],
      formData: {
        mini_app_id: '',
        version: '',
        version_status: '2'
      },

      selectLoading: false,
      btnLoading: false,
      optionsList: {},
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      options: {
        version_status: []
      }
    }
  },
  computed: {
    ...mapState('common', ['vsersionList']),
    searchParams() {
      return {
        mini_app_id: this.rowInfo.id
      }
    }
  },
  mounted() {
    this.handlerOpen()
  },
  methods: {
    // 打开初始化
    handlerOpen() {
      this.init()
    },
    handlerClose() {
      // this.$refs['form'].resetFields()
    },
    init() {
      this.dataSearch()
    },
    async dataSearch(pageModel = false) {
      this.tableLoading = true
      if (!pageModel) {
        this.tableData = []
      }
      const res = await getVersionList(this.searchParams)
      if (res.status_code === 1) {
        this.tableData = res.data.data.map((item) => ({
          ...item,
          visible: false
        }))
      }
      this.tableLoading = false
    },
    async _addVersion() {
      const res = await editVersion(this.formData)
      if (res.status_code === 1) {
        this.isAdd = false
        this.$message.success(res.msg)
        this.dataSearch()
        this.$emit('ok')
      }
    },

    async delVersion(row) {
      const data = {
        id: row.id
      }
      const res = await delVersion(data)
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.dataSearch()
        this.$emit('ok')
      }
    },
    addVersion() {
      this.isEdit = false
      this.isAdd = true
      this.formData = {
        mini_app_id: this.rowInfo.id,
        version: '',
        version_status: '2'
      }
    },
    closeAdd() {
      this.isAdd = false
    },
    editVersion(row) {
      console.log(row)
      this.isAdd = false
      this.isEdit = true
      row.visible = true
      const { id, mini_app_id, version, version_status } = JSON.parse(JSON.stringify(row))
      this.formData = {
        id,
        mini_app_id,
        version,
        version_status
      }
    },
    changeVersionStatus(val, row) {
      if (val) {
        const { id, mini_app_id, version, version_status } = JSON.parse(JSON.stringify(row))
        this.formData = {
          id,
          mini_app_id,
          version,
          version_status
        }
        this.submitVersion(row)
      }
    },
    async submitVersion(row) {
      row.visible = false
      const res = await editVersion(this.formData)
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.dataSearch()
        this.$emit('ok')
      }
    },
    submitAdd() {
      const obj = this.tableData.find(item => this.formData.version === item.version)
      if (this.formData.version.trim() === '') {
        this.$message.warning('请输入小程序版本')
        return false
      }
      if (obj) {
        this.$message.warning('该小程序版本已存在')
        return false
      }
      this._addVersion()
    },

    onCancel() {
      this.visible = false
      this.$emit('cancel')
    }
  }
}
</script>
  <style lang="scss" scoped>
  .drawer-container {
  }
  .drawer-form {
    display: inline-block;
  }
  .drawer-container {
    .version-box {
      .header {
        margin-bottom: 20px;
      }
    }
    padding: 20px;

    .el-select,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
    .el-drawer {
      overflow: auto;
    }
    .version-edit {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;
      .version-name {
      }
      .edit {
      }
      .el-tag {
        height: 20px;
        text-align: center;
        border: none;
        line-height: 20px;
      }
      // .el-tag--success {
      //   color: #fff;
      //   background-color: #06c261;
      // }
      // .el-tag--warning {
      //   color: #ffa81d;
      //   background-color: #fffbe6;
      // }
      // .el-tag--danger {
      //   color: #06c261;
      //   background-color: #e1fff0;
      // }
      // .el-tag--warning {
      //   color: #999999;
      //   background-color: #f4f4f4;
      // }
    }
  }
  </style>
